<template>
	<view class="bg">
		<view v-for="(item,i) in dataInfo.content" :key="i">
			<view class="search-nav" v-if="item.type == 'search'" @click="onLink('search',0)">
				<view><uni-search-bar placeholder="搜索内容" radius="8" bgColor="#FFFFFF" @confirm="onSearch" cancelButton="none" /></view>
				<view class="p10-0">
					<text class="searchBtn" @click="onSearchBtn">搜索</text>
				</view>
			</view>
			
			<view class="mt10 text-center" v-if="item.type == 'swipe'">
				<uni-swiper-dot :info="item.data" field="content">
					<swiper class="swiper-box">
						<swiper-item v-for="(e ,index) in item.data" :key="index">
							<view class="swiper-item"><image style="width: 100%;" @click="onLink(e.course.select_type,e.course.id)" :src="e.image" mode="widthFix" /></view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			
			<view class="mt10 text-center" v-if="item.type == 'nav'">
				<uni-grid :column="item.grid" :show-border="false" :square="false">
					<uni-grid-item class="mt10 grids" v-for="(e ,index) in item.data" :index="index" :key="index">
						<view class="p10-0">
							<image @click="onLink(e.course.select_type,e.course.id)" class="grid-image" :src="e.image" mode="aspectFill" />
						</view>
						<text class="fz08">{{e.title}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			
			<view class="mt10 content" v-if="item.type == 'shop' && item.style == 1">
				<view v-for="e in item.data" :key="e.id">
					<view class="course" @click="onLink('course',e.id)">
						<view class="text-right">
							<image class="image" :src="e.cover" mode="widthFix"></image>
						</view>
						<view class="course-brief">
							<view class="title pl8 line-clamp2">{{e.title}}</view>
							<uni-section :title="e.price" titleColor="red" titleFontSize="18px">
								<template v-slot:right>
									<text class="fz08rem number">{{e.learns}}人在学</text>
								</template>
							</uni-section>
						</view>
					</view>
					<view class="divider" ></view>
				</view>
			</view>
			
			
			<view class="content" v-if="item.type == 'shop' && item.style == 2">
				<view v-for="e in item.data" :key="e.id" class="mt15">
					<uni-card :is-shadow="true" :is-full="true" padding="10px 0px" :border="false">
						<view @click="onLink('course',e.id)">
							<image class="image" :src="e.cover" mode="widthFix"></image>
							<view class="title pl8 line-clamp2">{{e.title}}</view>
							<uni-section :title="e.price" titleColor="red" titleFontSize="18px">
								<template v-slot:right>
									<text class="fz08rem number">{{e.learns}}人在学</text>
								</template>
							</uni-section>
						</view>
					</uni-card>
				</view>
			</view>
			
			
			<view class="p15-8" v-if="item.type == 'shop' && item.style == 3">
				<uni-section :title="item.title" titleFontSize="22px">
					<template v-slot:right>
						<text class="fz08rem number" v-if="item.more == 1">查看更多</text>
					</template>
				</uni-section>
				<uni-row>
					<uni-col v-for="e in item.data" :key="e.id" class="mt15" :span="12" >
						<view class="p0-8" @click="onLink('course',e.id)"><image class="image" :src="e.cover+'?imageMogr2/crop/400x300/gravity/center'" mode="widthFix"></image></view>
						<view class="p0-8">{{e.title}}</view>
						<uni-section :title="e.price" titleColor="red" titleFontSize="18px">
							<template v-slot:right>
								<text class="fz08rem number">{{e.learns}}人在学</text>
							</template>
						</uni-section>
					</uni-col>
				</uni-row>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadData : {user:true},
				status:'more',
				dataInfo:{content:[]},
				
			}
		},
		onShow() {
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/course/index/0','GET').then(res => {
					_this.dataInfo = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onLink(type,id){
				if(!type){
					return;
				}
				let url = '/pages/course/info/info'
				if(type == 'pages'){
					url = '/pages/course/home/home'
				}
				if(type == 'search'){
					url = '/pages/course/course'
				}
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">

.grids{color: #333;}
.grid-image {width: 30px;height: 30px;}
.content{padding: 15px;background-color: #FFFFFF;}
.course{display: grid;grid-template-columns: 30% 70%;margin-top: 12px;}
.course-brief{background-color: #FFFFFF;height: 100px;}
.title{height: 85rpx;line-height:45rpx;font-size: 1.1rem;font-weight: 600;margin-top: 5px;}
.price{margin-top: 12px;}
.image{width: 100%;border-radius: 5px;height: auto;}
.course-label{position: relative;top: -3vh;}
.number{color: #7c7c7c;}
</style>
